ANTOOZA-FRONTEND/app/(main)/user/[sid]/style.scss

.user-profile {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px 32px;

	&__header {
		display: flex;
		flex-direction: column;
	}

	// ── Banner (Bluesky 비율 3:1, ~200px) ──
	&__banner {
		aspect-ratio: 3 / 1;
		max-height: 200px;
		background: #dfdfdf;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	&__banner-placeholder {
		width: 100%;
		height: 100%;
		background: #dfdfdf;
	}

	// ── Identity row (avatar + actions) ──
	&__identity {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0 16px;
		margin-top: -48px;
	}

	&__avatar-wrap {
		position: relative;
		z-index: 2;
	}

	&__avatar {
		width: 96px;
		height: 96px;
		border-radius: 50%;
		overflow: hidden;
		border: 4px solid var(--bg-page, #fff);
		background: var(--bg-subtle, #f3f4f6);
		display: block;
		object-fit: cover;
	}

	&__avatar-fallback {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 2rem;
		color: var(--text-muted);
		border-radius: 50%;
	}

	&__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin-top: 56px;
	}

	&__note-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 14px;
		border: 1px solid var(--border-default);
		border-radius: 999px;
		background: transparent;
		color: var(--fg-default);
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease;

		&:hover {
			background: var(--bg-subtle);
			border-color: var(--border-strong);
		}
	}

	&__edit-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 14px;
		border: 1px solid var(--border-default);
		border-radius: 999px;
		background: transparent;
		color: var(--fg-default);
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease, border-color 0.15s ease;

		&:hover {
			background: var(--bg-subtle);
			border-color: var(--border-strong);
		}
	}

	&__more-btn {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 1px solid var(--border-default);
		background: transparent;
		color: var(--fg-default);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: var(--bg-subtle);
		}
	}

	// ── Info (name, handle, counts, bio) ──
	&__info {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__name {
		font-size: 1.5rem;
		font-weight: 800;
		display: flex;
		align-items: center;
		gap: 6px;
		line-height: 1.2;
	}

	&__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&--creator {
			color: #3b82f6;
		}

		&--admin {
			color: #dc2626;
		}
	}

	&__handle {
		font-size: 0.9375rem;
		margin: 0;
	}

	&__handle-text {
		color: var(--text-muted);
	}

	&__handle-link {
		color: #8b5cf6;
		font-weight: 600;
		text-decoration: none;
		transition: color 0.15s ease;

		&:hover {
			color: #7c3aed;
			text-decoration: underline;
		}
	}

	&__counts {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		font-size: 0.9375rem;
		color: var(--text-secondary, #4b5563);
		margin: 8px 0 0;

		strong {
			color: var(--fg-default);
			font-weight: 700;
			margin-right: 2px;
		}
	}

	&__counts-link {
		color: inherit;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	&__intro {
		margin: 6px 0 0;
		line-height: 1.55;
		color: var(--text-primary);
		white-space: pre-wrap;
		word-break: break-word;
	}

	// ── Stats card ──
	&__stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 12px;
		padding: 12px 16px;
		margin: 8px 0;
		border: 1px solid var(--border-default);
		border-radius: 12px;
		background: var(--bg-card, #fff);
	}

	&__stat {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	&__stat-icon {
		flex-shrink: 0;

		&--coins {
			color: #f59e0b;
		}

		&--attendance {
			color: #22c55e;
		}

		&--streak {
			color: #f97316;
		}
	}

	&__stat-body {
		display: flex;
		flex-direction: column;
	}

	&__stat-label {
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__stat-value {
		font-size: 1rem;
		font-weight: 700;
		color: var(--fg-default);
	}

	// ── Tabs ──
	&__tabs {
		display: flex;
		gap: 0;
		padding: 0 16px;
		border-bottom: 1px solid var(--border-default);
		margin-bottom: 12px;
	}

	&__tab {
		padding: 12px 20px;
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--text-muted);
		text-decoration: none;
		position: relative;

		&--active {
			color: var(--fg-default);
			font-weight: 700;

			&::after {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 16px;
				right: 16px;
				height: 3px;
				background: #3b82f6;
				border-radius: 2px 2px 0 0;
			}
		}

		&:hover {
			color: var(--fg-default);
		}
	}

	&__content {
		padding: 0 16px;

		@media (max-width: 768px) {
			padding: 0;
		}
	}

	// ── Activity lists ──
	&__empty {
		text-align: center;
		color: var(--text-muted);
		padding: 40px 16px;
		font-size: 0.9375rem;
	}

	&__list {
		display: flex;
		flex-direction: column;
		gap: 8px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	&__list-item {
		border: 1px solid var(--border-default);
		border-radius: 12px;
		background: var(--bg-card, #fff);
		overflow: hidden;
		transition: border-color 0.15s ease;

		&:hover {
			border-color: var(--border-strong, #d1d5db);
		}
	}

	&__list-link {
		display: flex;
		gap: 12px;
		padding: 14px 16px;
		text-decoration: none;
		color: inherit;
	}

	&__list-thumb {
		width: 96px;
		height: 96px;
		object-fit: cover;
		border-radius: 8px;
		flex-shrink: 0;
		background: var(--bg-subtle);
	}

	&__list-body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	&__list-meta {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 0.8125rem;
		color: var(--text-muted);
	}

	&__list-board {
		font-weight: 600;
		color: var(--fg-default);
	}

	&__list-subject {
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--fg-default);
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	&__list-comment {
		font-size: 0.875rem;
		color: var(--text-secondary, #4b5563);
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	&__list-stats {
		display: flex;
		gap: 12px;
		font-size: 0.75rem;
		color: var(--text-muted);
		margin-top: 4px;
	}

	&__list-stat {
		display: inline-flex;
		align-items: center;
		gap: 4px;

		svg {
			flex-shrink: 0;
		}
	}

	&__list-author {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 6px;
		font-size: 0.8125rem;
	}

	&__list-author-avatar {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		object-fit: cover;
		background: var(--bg-subtle, #f3f4f6);
		flex-shrink: 0;

		&--fallback {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			color: var(--text-muted);
			font-size: 0.75rem;
		}
	}

	&__list-author-name {
		font-weight: 700;
		color: var(--fg-default);
	}

	&__list-author-handle {
		color: var(--text-muted);
	}

	&__list-parent {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
		font-size: 0.75rem;
		color: var(--text-muted);
		margin-top: 4px;
		padding: 6px 8px;
		background: var(--bg-subtle, #f3f4f6);
		border-radius: 6px;
	}

	&__list-parent-subject {
		color: var(--text-secondary, #4b5563);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
	}

	// ── Edit dialog ──
	&__edit-dialog {
		max-width: 600px !important;
		width: calc(100vw - 32px);
		padding: 0 !important;
		gap: 0 !important;
		overflow: hidden;

		// DialogHeader (shadcn 첫 자식)
		> div:first-of-type {
			padding: 14px 20px;
			border-bottom: 1px solid var(--border-default);

			h2 {
				padding-bottom: 0;
				font-size: 1rem;
				font-weight: 700;
				color: var(--fg-default);
			}
		}
	}

	&__edit-body {
		display: flex;
		flex-direction: column;
		padding: 0 20px 20px;
		gap: 16px;
	}

	&__edit-banner {
		position: relative;
		aspect-ratio: 3 / 1;
		max-height: 180px;
		margin: 0 -20px;
		background: #dfdfdf;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	&__edit-banner-placeholder {
		width: 100%;
		height: 100%;
	}

	&__edit-banner-actions {
		position: absolute;
		right: 12px;
		bottom: 12px;
		display: flex;
		gap: 6px;
	}

	&__edit-banner-btn {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background: rgba(0, 0, 0, 0.55);
		color: #fff;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: rgba(0, 0, 0, 0.75);
		}
	}

	&__edit-avatar-wrap {
		position: relative;
		width: 80px;
		height: 80px;
		margin: -40px 0 0 8px;
	}

	&__edit-avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		object-fit: cover;
		border: 4px solid var(--bg-page, #fff);
		background: var(--bg-subtle);
		display: block;

		&--empty {
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--bg-subtle, #f3f4f6);
			color: var(--text-muted);
		}
	}

	&__edit-avatar-btn {
		position: absolute;
		right: -4px;
		bottom: -4px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		border: 2px solid var(--bg-page);
		background: #3b82f6;
		color: #fff;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;

		&:hover {
			background: #2563eb;
		}
	}

	&__edit-fields {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	&__edit-field {
		display: flex;
		flex-direction: column;
		gap: 6px;

		> span {
			font-size: 0.8125rem;
			font-weight: 600;
			color: var(--fg-default);
		}

		input[type="text"],
		textarea {
			padding: 8px 10px;
			border-radius: 8px;
			border: 1px solid var(--border-default);
			background: var(--bg-page);
			font-size: 0.9375rem;
			color: var(--fg-default);
			outline: none;
			font-family: inherit;

			&:focus {
				border-color: #3b82f6;
			}
		}

		textarea {
			resize: vertical;
			min-height: 100px;
		}
	}

	&__edit-error {
		color: #dc2626;
		font-size: 0.8125rem;
		margin: 0;
	}

	&__edit-footer {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding-top: 4px;
	}

	&__edit-cancel,
	&__edit-save {
		padding: 8px 20px;
		border-radius: 4px;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
	}

	&__edit-cancel {
		background: transparent;
		color: var(--fg-default);
		border: 1px solid var(--border-default);

		&:hover {
			background: var(--bg-subtle);
		}
	}

	&__edit-save {
		background: #3b82f6;
		color: #fff;
		border: 1px solid #3b82f6;

		&:hover:not(:disabled) {
			background: #2563eb;
			border-color: #2563eb;
		}

		&:disabled {
			background: var(--bg-subtle);
			color: var(--text-muted);
			border-color: var(--bg-subtle);
			cursor: not-allowed;
		}
	}

	// ── Follow list (팔로워 / 팔로잉 페이지) ──
	&__subtab-title {
		font-size: 1.25rem;
		font-weight: 700;
		padding: 16px 16px 8px;
		margin: 0;
		color: var(--fg-default);
	}

	&__follow-section {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__follow-total {
		font-size: 0.8125rem;
		color: var(--text-muted);
		margin: 0 0 4px;
		padding: 0 4px;
	}

	&__follow-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__follow-item {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		border: 1px solid var(--border-default);
		border-radius: 12px;
		background: var(--bg-card, #fff);
		transition: border-color 0.15s ease;

		&:hover {
			border-color: var(--border-strong, #d1d5db);
		}
	}

	&__follow-avatar {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
		background: var(--bg-subtle, #f3f4f6);
		display: block;
		text-decoration: none;
	}

	&__follow-avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&__follow-avatar-fallback {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		font-size: 1rem;
		color: var(--text-muted);
	}

	&__follow-body {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	&__follow-name {
		font-size: 0.9375rem;
		font-weight: 700;
		color: var(--fg-default);
		text-decoration: none;
		display: inline-flex;
		align-items: center;
		gap: 4px;

		&:hover .user-profile__follow-name-text {
			text-decoration: underline;
		}
	}

	&__follow-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #3b82f6;
	}

	&__follow-handle {
		font-size: 0.8125rem;
		color: var(--text-muted);
	}

	&__follow-summary {
		font-size: 0.8125rem;
		color: var(--text-secondary, #4b5563);
		margin: 2px 0 0;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	&__follow-btn {
		flex-shrink: 0;
	}

	&__follow-error {
		color: #dc2626;
		font-size: 0.8125rem;
		padding: 8px;
		text-align: center;
	}

	&__follow-more-btn {
		align-self: center;
		margin-top: 12px;
		padding: 8px 20px;
		border-radius: 999px;
		background: transparent;
		border: 1px solid var(--border-default);
		color: var(--text-secondary);
		font-size: 0.8125rem;
		cursor: pointer;

		&:hover:not(:disabled) {
			background: var(--bg-subtle);
			color: var(--fg-default);
		}

		&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}
	}
}